<template>
  <section class="login">
    <figure class="form">
      <header>
        <h1>
          <img src="@/assets/logo_login.png" alt />
        </h1>
        <h2>系统管理登录</h2>
      </header>
      <article>
        <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" size="default">
          <el-form-item prop="username">
            <el-input placeholder="请输入手机号码" prefix-icon="el-icon-mobile-username" @keyup.enter.native="submitForm('loginForm')" v-model="loginForm.username" clearable ref="username"></el-input>
          </el-form-item>
          <el-form-item prop="pwd">
            <el-input placeholder="请输入密码" type="password" @keyup.enter.native="submitForm('loginForm')" prefix-icon="el-icon-mobile-pwd" v-model="loginForm.pwd" :show-password="true" clearable></el-input>
          </el-form-item>
          <el-button type="primary" size="default" :loading="loading" @click="submitForm('loginForm')" style="display:block;width:100%;" >登录</el-button>
        </el-form>
      </article>
      <footer>
        <div class="copy">远博科技提供技术支持</div>
      </footer>
    </figure>
  </section>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      activeName: "first",
      loginForm: {
        username: "tuyibo",
        pwd: "123123",
      },
      loading: false,
      rules: {
        username: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: "blur",
          },
        ],
        pwd: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
    }
  },
  mounted(){
    this.$refs.username.focus()
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          this.axios.post('/account/login', this.loginForm).then(res => {
            if (res.code === 200) {
              this.$message.success("登录成功");
              this.$store.dispatch("user/setToken", res)
              this.$router.push({ path: this.redirect || "/", query: this.otherQuery })
            } else {
              this.$message.error("登录失败！用户名或密码不对");
            }
            this.loading = false
          }).catch(() => {
            this.loading = false
            this.$message.error("登录失败，服务器错误");
          });          
        }
      })
    },
  },
}
</script>
<style lang="less">
.login {
  height: 100%;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  background: #f5f6f7 url("../assets/bg_login.jpg") center center / cover
    no-repeat;
  .form {
    transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    > header {
      background-color: #fff;
      padding: 40px 24px 20px;
      border-radius: 400px 400px 0 0;
      text-align: center;
      display: flex;
      flex-flow: column;
      justify-content: flex-end;
      align-items: center;
      > h1 {
        margin-bottom: 10px;
      }
      > h2 {
        line-height: 1;
        font-size: 24px;
        color: @color-primary;
        font-weight: 800;
        opacity: 0.4;
      }
    }
    > article {
      background-color: #fff;
      ::v-deep .el-tabs__nav-scroll {
        text-align: center;
        .el-tabs__nav {
          float: none;
          display: inline-block;
          text-align: center;
        }
      }

      .el-form {
        padding: 0 24px;
        width: 330px;
      }
    }
    > footer {
      border-radius: 0 0 4px 4px;
      padding: 24px;
      background-color: #fff;
      .copy {
        opacity: 0.5;
        text-align: center;
      }
    }
  }
}
</style>
